<template>
  <div class="about">
    <div class="top">
      <van-nav-bar
        title="确认收货"
        left-text=""
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
      />
    </div>
    <div class="mask">
      <van-cell is-link @click="showPopup">添加收货地址</van-cell>
      <van-popup v-model="show">
        <p>{{this.text}}收货地址</p>
        <van-form @submit="onSubmit"
        >
          <van-field
            v-model="names"
            name="names"
            label="用户名"
            placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <van-field
            v-model="tel"
            name="tel"
            label="手机号"
            placeholder="手机号"
            :rules="[{ required: true, message: '请填写手机号' }]"
          />
          <van-field
            v-model="address"
            name="address"
            label="地址"
            placeholder="地址"
            :rules="[{ required: true, message: '请填写地址' }]"
          />
          <div style="margin: 16px">
            <van-button round block type="info" native-type="submit"
              >{{this.text}}</van-button
            >
          </div>
            <div style="margin: 16px">
            <van-button round block type="info" @click="delItem"
              >删除</van-button
            >
          </div>
        </van-form>
      </van-popup>
    </div>
  </div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";
import Vue from "vue";
import axios from "../until/HttpAxios.js";
import { NavBar, Cell, Popup, Overlay, Field, Form, Button } from "vant";
Vue.use(Button);
Vue.use(Form);
Vue.use(Field);
Vue.use(Overlay);
Vue.use(Cell);
Vue.use(NavBar);
Vue.use(Popup);
export default {
  name: "Home",
  components: {
    HelloWorld,
  },
  data() {
    return {
      show: false,
      id: "",
      names: "",
      address: "",
      tel: "",
      username: "",
      password: "",
    };
  },
  computed:{
    id(){
      return this.$route.params.id;
    },
    text(){
        return this.id==="-1"?"添加":"修改";
    }
  },
  mounted() {
    let { id } = this.$route.params;
    this.id = id;
    console.log(id);
    if (this.id === -1) {
      //添加
      console.log("这是添加页面");
    } else {
      //反显
      axios.get(`/api/item/${id}`).then((res) => {
        console.log(res.data.data);
        if (res.data.data) {
          (this.names = res.data.data.name),
            (this.address = res.data.data.address),
            (this.tel = res.data.data.tel);
        }
      });
    }
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
      console.log(123);
    },
    onClickRight() {
      console.log(123);
    },

    showPopup() {
      this.show = true;
    },
    onSubmit(values) {
      if (this.id === "-1") {
        axios
          .post(`/api/massage`, {
            name: values.names,
            tel: values.tel,
            address: values.address,
          })
          .then((res) => {
            console.log(res.data);
          });
      } else {
        axios
          .put(`/api/massage/${this.id}`, {
            name: values.names,
            address: values.address,
            tel: values.tel,
          })
          .then((res) => {
            console.log(res.data);
          });
      }
    },
    delItem(){
      console.log(this.id);
      axios.delete(`/api/massage/${this.id}`).then(res=>{
        console.log(res.data);
      })
    }
  },
};
</script>
<style lang="scss">
.about {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .top {
    width: 100%;
    height: 50px;
  }
  .mask {
    width: 100%;
    height: 50px;
  }
  .main {
    width: 100%;
    flex: 1;
  }
  .van-popup,
  .van-popup--center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 300px;
    height: 300px;
    border-radius: 20px;
    p {
      text-align: center;
    }
  }
}
</style>

